<template>
    <view class="life-container">
        <!-- 顶部导航标签 -->
        <view class="nav-tabs">
            <text :class="['tab-item', activeTab === 'all' ? 'active' : '']" @click="switchTab('all')">活动广场</text>
            <text :class="['tab-item', activeTab === 'following' ? 'active' : '']"
                @click="switchTab('following')">我参加的</text>
            <text :class="['tab-item', activeTab === 'following2' ? 'active' : '']"
                @click="switchTab('following2')">活动评价</text>
        </view>

        <!-- 二级分类标签 -->
        <scroll-view class="sub-tabs" scroll-x :show-scrollbar="false">
            <view class="sub-tabs-content">
                <text :class="['sub-tab-item', activeSubTab === 'all' ? 'active' : '']"
                    @click="switchSubTab('all')">全部</text>
                <text :class="['sub-tab-item', activeSubTab === 'member' ? 'active' : '']"
                    @click="switchSubTab('member')">会员活动</text>
                <text :class="['sub-tab-item', activeSubTab === 'business' ? 'active' : '']"
                    @click="switchSubTab('business')">招商活动</text>
                <text :class="['sub-tab-item', activeSubTab === 'offline' ? 'active' : '']"
                    @click="switchSubTab('offline')">线下沙龙</text>
                <text :class="['sub-tab-item', activeSubTab === 'type1' ? 'active' : '']"
                    @click="switchSubTab('type1')">创业交流</text>
                <text :class="['sub-tab-item', activeSubTab === 'type2' ? 'active' : '']"
                    @click="switchSubTab('type2')">投资对接</text>
                <text :class="['sub-tab-item', activeSubTab === 'type3' ? 'active' : '']"
                    @click="switchSubTab('type3')">产品发布</text>
                <text :class="['sub-tab-item', activeSubTab === 'type4' ? 'active' : '']"
                    @click="switchSubTab('type4')">技术分享</text>
            </view>
        </scroll-view>

        <!-- 活动列表 -->
        <scroll-view class="activity-list" scroll-y="true">
            <view class="activity-item" v-for="(item, index) in contentList" :key="index" @tap="toDetail(item)">
                <image class="activity-image" :src="item.image" mode="aspectFill"></image>
                <view class="activity-info">
                    <view class="activity-title">{{ item.title }}</view>
                    <view class="organizer">
                        <image class="organizer-avatar" :src="item.userAvatar"></image>
                        <text class="organizer-name">{{ item.userName }}</text>
                    </view>
                    <view class="activity-time">{{ item.time }}</view>
                    <view class="activity-address">{{ item.address }}</view>
                    <view class="activity-status">
                        <view class="participants">
                            <view class="avatar-list">
                                <image class="participant-avatar" v-for="(avatar, idx) in item.participants" :key="idx"
                                    :src="avatar"></image>
                            </view>
                            <text class="participant-count">{{ item.participantCount }}人报名</text>
                        </view>
                        <text class="status-tag">{{ item.status }}</text>
                    </view>
                </view>
            </view>
        </scroll-view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            activeTab: 'all',
            activeSubTab: 'all',
            contentList: [
                {
                    image: 'https://heda123.oss-cn-guangzhou.aliyuncs.com/upload/3/20250121/e41d7fe8ead48f06290c699d6d6d36e9.jpg',
                    title: '戎么么杭州线下群星计划发布会（服务商）',
                    userAvatar: '../static/img/album.png',
                    userName: '戎么么 | 燕窝创业',
                    time: '02.15 09:25 ~ 02.16 18:00',
                    address: '浙江省杭州市滨江区立业路788号1号楼',
                    participants: ['../static/img/album.png', '../static/img/album.png'],
                    participantCount: '296',
                    status: '进行中'
                },
                {
                    image: 'https://heda123.oss-cn-guangzhou.aliyuncs.com/upload/3/20250121/e41d7fe8ead48f06290c699d6d6d36e9.jpg',
                    title: '2024年新春创业者交流会',
                    userAvatar: '../static/img/album.png',
                    userName: '创业邦',
                    time: '02.20 14:00 ~ 02.20 17:00',
                    address: '杭州市西湖区文三路478号',
                    participants: ['../static/img/album.png', '../static/img/album.png', '../static/img/album.png'],
                    participantCount: '158',
                    status: '报名中'
                },
                {
                    image: 'https://heda123.oss-cn-guangzhou.aliyuncs.com/upload/3/20250121/e41d7fe8ead48f06290c699d6d6d36e9.jpg',
                    title: '数字经济产业投资对接会',
                    userAvatar: '../static/img/album.png',
                    userName: '产业投资联盟',
                    time: '03.01 09:00 ~ 03.02 18:00',
                    address: '杭州市滨江区江南大道3888号',
                    participants: ['../static/img/album.png', '../static/img/album.png'],
                    participantCount: '426',
                    status: '报名中'
                }
            ]
        }
    },
    methods: {
        switchTab(tab) {
            this.activeTab = tab
        },
        switchSubTab(subTab) {
            this.activeSubTab = subTab
        },
        toDetail(item) {
            uni.navigateTo({
                url: `/pagesSocial/activity/activityItem`
            })
        }
    }
}
</script>

<style lang="scss">
.life-container {
    min-height: 100vh;
    background: #fff;
    padding: 0;
}

.nav-tabs {
    display: flex;
    background: #fff;
    padding: 20rpx 30rpx;
    border-bottom: 1rpx solid #f5f5f5;

    .tab-item {
        margin-right: 40rpx;
        font-size: 32rpx;
        color: #333;
        position: relative;

        &.active {
            color: #000;
            font-weight: bold;

            &::after {
                content: '';
                position: absolute;
                bottom: -10rpx;
                left: 0;
                width: 100%;
                height: 4rpx;
                background: #2ed573;
                border-radius: 2rpx;
            }
        }
    }
}

.sub-tabs {
    white-space: nowrap;
    background: #fff;
    padding: 20rpx 0;

    .sub-tabs-content {
        display: inline-flex;
        padding: 0 20rpx;
    }

    .sub-tab-item {
        display: inline-block;
        padding: 12rpx 40rpx;
        font-size: 28rpx;
        color: #666;
        background: #f8f8f8;
        border-radius: 40rpx;
        margin-right: 20rpx;

        &.active {
            color: #fff;
            background: #2ed573;
        }

        &:first-child {
            margin-left: 10rpx;
        }
    }
}

.activity-list {
    padding: 20rpx;
    background-color: #f1f1f1;

    .activity-item {
        background: #fff;
        border-radius: 12rpx;
        margin-bottom: 20rpx;
        overflow: hidden;
        box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

        .activity-image {
            width: 100%;
            height: 320rpx;
        }

        .activity-info {
            padding: 20rpx;

            .activity-title {
                font-size: 32rpx;
                font-weight: bold;
                color: #333;
                margin-bottom: 16rpx;
            }

            .organizer {
                display: flex;
                align-items: center;
                margin-bottom: 16rpx;

                .organizer-avatar {
                    width: 36rpx;
                    height: 36rpx;
                    border-radius: 50%;
                    margin-right: 10rpx;
                }

                .organizer-name {
                    font-size: 26rpx;
                    color: #666;
                }
            }

            .activity-time,
            .activity-address {
                font-size: 24rpx;
                color: #999;
                margin-bottom: 8rpx;
            }

            .activity-status {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-top: 16rpx;

                .participants {
                    display: flex;
                    align-items: center;

                    .avatar-list {
                        display: flex;
                        margin-right: 10rpx;
                    }

                    .participant-avatar {
                        width: 36rpx;
                        height: 36rpx;
                        border-radius: 50%;
                        border: 2rpx solid #fff;
                        margin-right: -10rpx;
                    }

                    .participant-count {
                        font-size: 24rpx;
                        color: #999;
                        margin-left: 20rpx;
                    }
                }

                .status-tag {
                    font-size: 24rpx;
                    color: #2ed573;
                    padding: 6rpx 20rpx;
                    background: rgba(46, 213, 115, 0.1);
                    border-radius: 20rpx;
                }
            }
        }
    }
}
</style>
